<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="box  pd-30" v-if="Object.keys(refundOptions).length > 0">
			<view class="list_box bd-r40 pd-20">
				<view class="item flex">
					<image class="imgs bd-r40" :src="refundOptions.info.cover" mode="aspectFill">
					</image>
					<view class="contnet ml-20">
						<view class="te-2 ft-28 fw-800 c-33">{{ refundOptions.info.goods_name }}</view>
						<view class="ft-24 c-99 mt-10">订单编号：{{ refundOptions.info.ordernum }}</view>

					</view>
				</view>
			</view>
			<view class="refundType_box bd-r20 mt-20">
				<view class="ft-28 c-33 fw-800">选择售后类型</view>
				<view class="btn_model flex-bwt mt-20">
					<template v-for="item in typeBtn" :key="item">
						<view class="btn" :class="{ active: item.name == selectType }" @click="selectTypeFun(item)">
							{{ item.name }}
						</view>
					</template>
				</view>
				<view class="textarea mt-20 bd-r20 pd-20">
					<text class="ft-24 c-33 fw-800">选择售后原因</text>
					<picker mode="selector" :range="reasonList" @change="changeReason">
						<view class="ft-24 c-99 flex-bwt mt-20" :class="{ 'c-66': reason }">
							{{ reason ? reason : '请选择' }}
							<image class="icon_samll deg-90"
								src="https://cdn.oss.bon-top.cn/static_bc/images/icon15.png" mode="aspectFit">
							</image>
						</view>
					</picker>
				</view>
			</view>
			<view class="describe_box bd-r20 pd-20 mt-20">
				<text class="ft-24 c-33 fw-800">输入申请描述</text>

				<textarea class="textarea bd-r20 mt-20" v-model="text" placeholder="请输入您想描述的简介"
					placeholder-class="textarea-placeholder" maxlength="-1" @input="" />
				<view class="img_model bd-r20 mt-20 pd-20">
					<text class="ft-24 c-99">添加图({{ fileList.length }}/{{ maxLength }} )</text>
					<view class="imgBox flex mt-10">
						<!-- 图片列表 -->
						<view class="img_list flex">
							<view class="imgItem" v-for="(item, index) in fileList" :key="index">
								<image class="imgs  bd-r20" :src="item.url"
									@click="openImg(index, fileList.map(f => f.url))" mode="aspectFill" />
								<image class="icon_samll icons"
									src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png" mode="aspectFit"
									@click="deleteImg(index, item)" />
							</view>
							<u-upload @afterRead="afterRead" name="6" multiple :maxCount="maxLength"
								v-if="fileList.length < maxLength">
								<view class="imgUpload flex-center">
									<image class="icon_samll deg-90"
										src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png"
										mode="aspectFit">
									</image>
								</view>
							</u-upload>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<view class="btn_box pd-20">
			<view class="btn" @click="back">返回</view>
			<view class="btn submit" @click="sub">提交</view>
		</view>

	</view>

</template>

<script setup lang="js">
import {
	reactive,
	ref
} from 'vue';
import navHead from '@/components/navHead.vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
const headData = reactive({
	color: '#fff',
	title: '申请售后/售后'
})
const option = reactive({
	html: `删除后，将无法添加到附件服务到本订单中，<span class="c-33 fw-800">“保存修改”</span>后生效，如需再下订可以通过在 <span class="c-33 fw-800">“产品”</span>首页进入附加服务中再次下订。`,
	title: '确定要删除附加服务吗?',

})
const typeBtn = reactive([{
	name: '退款',
	id: 0
}, {
	name: '换商品',
	id: 1
}])



const selectType = ref('')
const reasonList = ref([])
const selectTypeFun = (item) => {
	selectType.value = item.name
	reasonList.value = selectType.value == '退款' ? refundOptions.value.refund_options : (selectType.value == '换商品' ? refundOptions.value.goods_options : [])
	reason.value = ''
}
// 图片预览

const openImg = (index, imgList = []) => {
	uni.previewImage({
		current: index,
		urls: imgList
	});
}

const fileList = ref([])
// 删除图片
const deleteImg = (index, item) => {
	fileList.value = fileList.value.filter((f, i) => i !== index)
}
const maxLength = ref(9)
// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	lists = lists.slice(0, maxLength.value - fileList.value.length)

	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFilePromise(lists[i].url);
		let item = lists[i];
		fileList.value.push({
			...item,
			status: 'success',
			message: '',
			url: result,
		});
	}
};

const uploadFilePromise = (url) => {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: utils.domain + '/api/v1/button.uploadImage',
			filePath: url,
			name: 'image',
			fileType: 'image',

			formData: {
				app_id: utils.app_id,
				identity: utils.identity,
			},
			header: {
				// 'content-type': 'multipart/form-data',
				'Authorization': utils.getToken()
			},
			success: (res) => {
				const resData = JSON.parse(res.data)
				resolve(resData.data.info.url);
			},
		});
	});
};

const diaLogPop = ref('diaLogPop')
// 删除
const deleteServe = () => {
	diaLogPop.value.open()
}

// 删除提交
const confirm = () => {
	diaLogPop.value.close()

	console.log('哈哈哈哈')
}

const refundOptions = ref({})
const order_id = ref('')
const isSettings = ref(false)

onLoad(option => {
	order_id.value = option?.order_id || ''
	utils
		.request(
			api.getRefundOptions, { id: option.order_id },
			"get"
		)
		.then((res) => {
			refundOptions.value = res.data
		});
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {

				// isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
				if (res.subscriptionsSetting.itemSettings['Urp9k7LRaQPJzoZIqQuaZJhmn2docH7YLzaPpAaKm9k']) isSettings.value = true
			}
		}
	})
})

const reason = ref('')
const changeReason = (e) => {
	reason.value = reasonList.value[e.detail.value] || ''
}

const back = () => {
	uni.navigateBack()
}

const text = ref('')
const sub = () => {

	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: ['Urp9k7LRaQPJzoZIqQuaZJhmn2docH7YLzaPpAaKm9k'],
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}

}
const submit = () => {
	const formData = {}
	formData.order_id = order_id.value
	formData.type = selectType.value
	formData.reason = reason.value
	formData.content = text.value
	formData.images = fileList.value.map(item => {
		return item.url
	})
	utils
		.request(
			api.subRefund, formData,
			"post"
		)
		.then((res) => {
			uni.redirectTo({
				url: '/subpackage/refund/refundDetail?id=' + res.data.id
			})
		});

}
</script>

<style lang="scss" scoped>
.box {}

.list_box {
	padding: 20rpx;
	background-color: #f8f8f8;

	.item {
		border-radius: 40rpx;

		.imgs {
			width: 142rpx;
			height: 174rpx;
			flex-shrink: 0;
		}

		.contnet {
			flex: 1;
			height: 174rpx;
			line-height: 43rpx;
			padding-top: 10rpx;
			box-sizing: border-box;
		}

		.tip {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;

			.tip_model {
				background: #ebebeb;
				padding: 20rpx;
				border-radius: 40rpx;
			}

			.btn {
				margin-top: 40rpx;
				color: #999;
			}
		}

	}
}

.refundType_box {
	background-color: #F8F8F8;
	padding: 20rpx;

	.btn_model {

		.btn {
			flex: 1;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;
			height: 58rpx;
			line-height: 58rpx;
			color: #666;
			font-size: 24rpx;

		}

		.btn:last-child {
			margin-left: 20rpx;
		}

		.active {
			background-color: #333;
			color: #DBF046;
		}
	}

	.textarea {
		background-color: #fff;

	}

}


.describe_box {
	background-color: #F8F8F8;

	.textarea {
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #666;

		.textarea-placeholder {
			font-size: 24rpx;
			color: #999;
			// padding: 20rpx;
		}
	}

	.img_model {
		background-color: #fff;

		.imgBox {
			display: flex;
			align-items: flex-end;

			.img_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;

				.imgItem {
					// margin-right: auto;

					.imgs {
						width: 106rpx;
						height: 136rpx;
					}

					width: 106rpx;
					height: 136rpx;
					position: relative;

					.icons {
						position: absolute;
						right: 5rpx;
						top: 5rpx;
					}
				}

				:deep(.u-upload) {
					flex: 0 !important;
					margin-left: auto;
				}
			}

			.imgUpload {
				width: 106rpx;
				height: 136rpx;
				border-radius: 20rpx;
				border: 2rpx dashed #333;

			}


		}


	}


}

.btn_box {
	display: flex;
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		text-align: center;
		line-height: 78rpx;
		height: 78rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		width: 196rpx;
		background-color: #fff;
	}

	.submit {
		flex: 1;
		background-color: #333;
		color: #DBF046;
		margin-left: 20rpx;
	}
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.imgPreview {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;

	.box,
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bg {
		z-index: 2;
		background-color: #333;
		opacity: 0.5;
	}

	.box {
		z-index: 3;
		display: flex;
		flex-direction: column;

		.icon {
			text-align: right;
			font-size: 60rpx;

		}

		.imgView {
			flex: 1;

			image {
				width: 100%;
				height: 800rpx;
				padding: 30rpx;
				// background-color: red;
			}
		}
	}
}

.boxView {
	min-height: 800rpx;
	background-color: #f1f1f1;
	border-radius: 40rpx 40rpx 0 0;

	.title {

		.icon {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.list_box {
		padding: 20rpx;
		background-color: #f1f1f1;

		.list {
			background-color: #fff;
			padding: 20rpx;

		}
	}

}
</style>